<template>
  <div
    class="login-container"
    :style="{ 'background-image': 'url(' + loginBg + ')' }"
  >
    <img :src="logoImg" class="top_logo" @click="toMourefun" alt="" srcset="" />
    <div class="login_inner" :loading="loading">
      <div class="title-container">莫凡统一认证</div>
      <div class="login_item">
        <el-input placeholder="请输入账户信息" v-model="username" clearable></el-input>
      </div>
      <div class="login_item">
        <el-input placeholder="请输入密码" type="password" v-model="password" show-password></el-input>
      </div>
      
      <div class="login_item">
        <el-button :loading="loading" class="login_btn" type="primary" size="medium" @click="handleLoginAccount" >登   录</el-button>
      </div>
      <div class="login_otherbox">
        <div class="login_otherbox_text">其他登录方式</div>
        <div class="login_otherbox_inner">
          <!-- 钉钉授权登录 -->
          <el-tooltip effect="dark" content="钉钉授权登录" placement="bottom-start">
            <div class="login_otherbox_icon" @click="handleLoginDingTalk">
              <svg t="1722657980199" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4263" width="128" height="128"><path d="M717.6192 682.1376h116.5824l-212.0192 296.3968-5.12-1.792 46.08-194.816h-91.136c10.24-47.2576 20.0704-91.648 30.72-140.1856-25.9072 7.7824-48.5376 12.288-69.1712 21.2992-44.6976 19.456-84.8896 11.1616-121.1392-17.6128a455.68 455.68 0 0 1-66.9696-63.232c-20.48-24.4736-13.9776-38.4512 17.0496-43.6736 65.6896-11.0592 131.584-20.7872 197.5808-33.0752h-41.4208c-56.7808-0.5632-113.6128-1.4848-170.3936-1.6896-34.8672 0-59.4432-18.176-80.4864-43.4688a272.5888 272.5888 0 0 1-54.9888-110.848c-6.4512-26.0096 0.6656-33.1776 27.4944-26.9312 67.84 15.7696 135.5776 32.1024 203.4176 47.9744a1030.1952 1030.1952 0 0 0 105.1648 20.1728c-40.96-13.6192-82.7392-26.112-123.3408-40.96-61.952-22.9376-122.88-47.9232-184.832-71.68A66.56 66.56 0 0 1 201.728 240.64c-24.1152-54.9888-42.1376-111.5648-42.5472-172.288 0-22.1184 7.2192-27.5456 26.2144-18.3296C378.88 143.36 578.9184 222.3104 779.5712 299.3152A288.6656 288.6656 0 0 1 834.56 329.0624c33.3312 22.1696 44.1856 50.1248 26.9312 85.248-35.4304 72.0896-74.3936 142.4384-112.2304 213.3504-9.472 17.4592-20.0192 34.4064-31.6416 54.4768z" fill="#59ADF8" p-id="4264"></path></svg>
            </div>
          </el-tooltip>
          
          <!-- 微信授权登录 -->
          <el-tooltip effect="dark" content="微信授权登录" placement="bottom-start">
            <div class="login_otherbox_icon" @click="handleLoginWechat">
              <svg t="1722658021956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8217" width="128" height="128"><path d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z" fill="#09BB07" p-id="8218"></path></svg>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import index from "./index";
  export default index;
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  min-width: 1200px;
  height: 100vh;
  min-height: 682px;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .top_logo{
    width: 200px;
    cursor: pointer;
  }

  .login_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 15rem;
    width: 320px;
    margin-left: -160px;
    background-color: #fff;
    border-radius: 1rem;
    overflow: hidden;
    padding: 3rem 1.5rem;
  }

  .login_btn{
    width:100% !important;
    border:none!important;
    background-image: linear-gradient(310deg, #212229, #212529)!important;
    letter-spacing: .5rem;
    text-transform: none;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .title-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #666666;
    text-align: center;
    font-weight: bold;
    margin-bottom: 32px;
  }
  .login_item{
    width: 100%;
    margin-bottom: 1rem;
  }
  .login_otherbox{
    width: 100%;
    height: 4rem;
  }
  .login_otherbox_inner{
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .login_otherbox_text{
    color: #686868;
    font-size: 14px;
    margin-bottom: 0.5rem;
  }
  .login_otherbox_icon{
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    .icon{
      width: 2rem;
      height: 2rem;
    }
    margin-right: .5rem;
  }
  .login_otherbox_icon:hover{
    cursor: pointer;
    box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}
</style>
